<template>
  <view class="content">
    <view class="text">请截图下方二维码到支付宝进行支付</view>
    <view class="text">请在60分钟内完成支付</view>
    <view class="canvas">
      <canvas
        canvas-id="qrcode"
        :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }"
      />
    </view>

    <u-toast ref="uToast" />
    <!-- <u-button type="primary" @click="savePayCode">保存支付二维码</u-button> -->
  </view>
</template>

<script>
import uQRCode from "@/common/js/uqrcode.js";
export default {
  data() {
    return {
      qrcodeText: "",
      qrcodeSize: uni.upx2px(590),
      qrcodeSrc: "",
      timer: null,
    };
  },
  onUnload() {
    clearInterval(this.timer);
  },
  onLoad(option) {
    this.qrcodeText = this.vuex_pay_info.payImg;
    this.make();
    this.timer = setInterval(() => {
      this.$u.api
        .payQueryApi({ tradNo: this.vuex_pay_info.tradNo })
        .then((res) => {
          if (res.data === "true") {
            uni.showToast({
              title: "支付成功",
              icon: "success",
              duration: 2000,
            });
            // 跳转到订单页面
            this.$u.route({
              type: "switchTab",
              url: "pages/order/userOrder",
            });
            clearInterval(this.timer);
          }
        })
        .catch((err) => {
          console.log(err)
          // 获取用户的当前设置，判断是否点击了“总是保持以上，不在询问”
          uni.getSetting({
            withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
            success(res) {
              if (res.subscriptionsSetting["mainSwitch"]) {
                uni.openSetting({
                  // 打开设置页
                  success(res) {
                    console.log(res.authSetting);
                  },
                });
              } else {
                // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
                uni.requestSubscribeMessage({
                  tmplIds: [
                    "CvrpCR0hy8v_kMZ8hLM9-ykXO0tc-tosdeLrEjSYAuI",
                    "1BehNqwMkxG1_BcE4haW9OjEziw1uFw5dz8Tz57Gazk",
                    "zWVgtVjIJK0vurzxrC3dZOwkXlkNEbFlVo0LB75eZ8k",
                  ], //
                  success(res) {
                    console.log(res);
                    if (res["字段"] == "accept") {
                      // 字段就是tmplIds模板id
                      // ....
                    }
                  },
                });
              }
            },
          });
        });
    }, 5000);
  },
  onShow() {
    // this.qrcodeText = this.vuex_pay_info.payImg;
    // this.make();
    // this.timer = setInterval(() => {
    //   this.$u.api
    //     .payQueryApi({ tradNo: this.vuex_pay_info.tradNo })
    //     .then((res) => {
    //       if (res.data === "true") {
    //         uni.showToast({
    //           title: "支付成功",
    //           icon: "success",
    //           duration: 2000,
    //         });
    //         // 跳转到订单页面
    //         this.$u.route({
    //           type: "switchTab",
    //           url: "pages/order/userOrder",
    //         });
    //         clearInterval(this.timer);
    //       }
    //     });
    // }, 5000);
  },
  methods: {
    async make() {
      uni.showLoading({
        title: "二维码生成中",
        mask: true,
      });
      setTimeout(() => {
        uQRCode.make({
          canvasId: "qrcode",
          text: this.qrcodeText,
          size: this.qrcodeSize,
          margin: 10,
          success: (res) => {
            console.log(res);
            this.qrcodeSrc = res;
          },
          complete: () => {
            uni.hideLoading();
          },
        });
      }, 2000);
    },
  },
};
</script>

<style>
page {
  background-color: #f0f0f0;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: var(--status-bar-height);
}

.text {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;
  font-size: 36rpx;
  color: #666666;
}

.canvas {
  margin-top: 50rpx;
  text-align: center;
}

.canvas canvas {
  margin: 0 auto;
}

.image {
  width: 354rpx;
  margin-top: 50rpx;
  text-align: center;
}

.image image {
  display: block;
  width: 354rpx;
  height: 354rpx;
}

.input {
  width: 600rpx;
  height: 40px;
  margin: 50rpx 0;
  padding: 0 20rpx;
  border: 1px solid #b0b0b0;
  border-radius: 5px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.button {
  width: 690rpx;
  margin: 10rpx;
}

.button:last-child {
  margin-bottom: 50rpx;
}

.component {
  margin-top: 30rpx;
  text-align: center;
}

.component-title {
  display: inline-block;
  padding: 20rpx 40rpx;
  border-bottom: 2px solid #d8d8d8;
  font-size: 36rpx;
}

.component-buttons {
  margin-top: 30rpx;
}
</style>
